<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/page-index.css">
	<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
	<!-- 百度地图API -->
	<script type="text/javascript"
		src="http://api.map.baidu.com/getscript?v=2.0&ak=TGlGkkPUM46yooXY1LWVmW9PSuEFp9l0"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
	<script type="text/javascript" src="js/page-index.js"></script>
	<title>地图展示</title>
</head>

<body>
	<div class="pulbic-header">
		<div class="public-container clearfix">
			<div class="header-logo">
				<a href="#">LOGO</a>
			</div>
			<ul class="header-nav clearfix">
				<li class="item"><a class="header-a" href="#">首 &nbsp&nbsp 页</a></li>
				<li class="item"><a class="header-a" href="#">产品介绍</a></li>
				<li class="item"><a class="header-a" href="#">解决方案</a></li>
				<li class="item"><a class="header-a" href="#">加入我们</a></li>
			</ul>
			<div class="header-call clearfix"></div>
		</div>
	</div>
	<div class="public-container index-banner">
		<div id="banner">
			<div class="focus">
				<ul>
					<li class="on">1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</div>


			<div id="banner_list">
				<a href="#" target="_blank"><img src="images/banner1.png" /></a>
				<a href="#" target="_blank"><img src="images/banner3.png" /></a>
				<a href="#" target="_blank"><img src="images/banner1.png" /></a>
			</div>

		</div>
	</div>
	<div class="public-container clearfix">
		<div id="allmap"></div>
	</div>

</body>

</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	var point = new BMap.Point(118.051429, 24.620072);
	map.centerAndZoom(point, 16);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes: [
			BMAP_NORMAL_MAP,
			BMAP_HYBRID_MAP
		]
	}));
	var marker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker);               // 将标注添加到地图中
	//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	var opts = {
		width: 280,     // 信息窗口宽度
		height: 90,     // 信息窗口高度
		title: "<span style='color:#CC5522;font-size: 14px;font-weight: bold; white-space: nowrap'>软件园三期-B13栋</span>", // 信息窗口标题
		enableMessage: true//设置允许信息窗发送短息
	}
	var infoWindow = new BMap.InfoWindow("<span style='font-size: 12px;'>地址：福建省厦门市集美区诚毅北大街55号</span><p style='font-size: 12px;'>坐标：118.051429, 24.620072</p>", opts);  // 创建信息窗口对象 
	map.openInfoWindow(infoWindow, point); //开启信息窗口
	marker.addEventListener("click", function () {
		map.openInfoWindow(infoWindow, point); //开启信息窗口
	});
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>